<template>
	<view class="box">
		<view class="nav-box">
			<u-tabs :current="navList.findIndex(item => item.id === type)" lineWidth="30rpx" lineHeight="2rpx"
				lineColor="#ff9844" :list="navList" @change="changeType" :activeStyle="{color:'#ff9844',fontSize:'28rpx'}"
				:inactiveStyle="{color:'#8F8F8F',fontSize:'28rpx'}"></u-tabs>
		</view>

		<view class="li" v-for="item in dataList" :key="item.order_id" @click="navToDetail(item)">
			<view class="top">
				<view class="name">
					{{item.goods_list[0].goods_name}}
				</view>
				<view class="type" :style="item.order_status === 5 ? 'color: #A5A5A5;' : ''">
					{{item.typename || item.type_name}}
				</view>
			</view>
			<view class="content">
				<view class="t">
					<view class="wenjian">
						{{item.goods_list.length}}个文件
					</view>
					<view class="r">
						<view class="" style="font-size: 20rpx;">￥</view>
						<view class="">{{item.order_amount}}</view>
					</view>
				</view>
				<view class="c">
					下单时间：{{item.add_time}}
				</view>
				<view class="c">
					订单编号：{{item.order_sn}}
				</view>
			</view>
			<view class="sunmits" v-if="item.type === 1">
				<view class="btn1" @click.stop="cancelOrder(item.order_id)">
					取消订单
				</view>
				<view @click.stop="handlePayment(item.order_id)">
					立即支付
				</view>
			</view>
			<view class="sunmits" v-else-if="item.order_status === 2">
				<view class="btn1" @click.stop="handleShowAfterSales(item, true)">
					申请售后
				</view>
			</view>
			<view class="sunmits" v-else-if="item.type === 3">
				<view @click.stop="confirmReceipt(item.order_id)">
					确认收货
				</view>
			</view>
			<view class="sunmits" v-else-if="item.type === 4">
				<view @click.stop="handleEvaluate(item)">
					立即评价
				</view>
			</view>
		</view>

		<!-- 底部弹出框部分 -->
		<view class="popup" v-if="showAfterSales">
			<view class="popupFlex">
				<view class="popupFlex-top-box">
					<view class="title">
						请选择售后类型
					</view>
					<view class="close-icon-box" @click="handleShowAfterSales({}, false)">
						<image src="@/static/img/del.png" mode="aspectFit"></image>
					</view>
				</view>

				<view class="commodity">
					<image :src="returnGoods.goods_list[0].original_img"></image>
					<view class="text">
						<view>
							<view class="name">{{returnGoods.goods_list[0].goods_name}}</view>
							<!-- <view class="spec">{{returnGoods.goods_list[0].spec_key_name}}</view> -->
						</view>
						<view class="spec2">单价
							￥{{returnGoods.goods_list[0].goods_price}}<text>数量{{returnGoods.goods_list[0].goods_num}}</text>
						</view>
					</view>
				</view>
				<view class="model" @click="$navTo('pages/mines/after_sales', {orderId: returnGoods.order_id, refundType: 1})">
					<view class="left">
						<image src="@/static/img/tuiicon.png"></image>
						<view>退款</view>
					</view>
					<view class="right">
						<view>商品未收到货退款</view>
						<image src="@/static/img/righticon.png"></image>
					</view>
				</view>
				<!-- 	<view class="model"
					@click="$navTo('pages/mines/after_sales', {orderId: returnGoods.order_id, refundType: 3, mode: 'create'})">
					<view class="left">
						<image src="@/static/img/huanicon.png"></image>
						<view>换货</view>
					</view>
					<view class="right">
						<view>退换您收到的商品</view>
						<image src="@/static/img/righticon.png"></image>
					</view>
				</view> -->
			</view>
		</view>

	</view>
</template>

<script>
	import {
		OrderApi,
		UserApi
	} from '@/api';
	import {
		toPromise
	} from '@/utils/util';
	export default {
		data() {
			return {
				// 导航
				navList: [{
						name: '全部',
						id: 0
					}, {
						name: '待支付',
						id: 1
					}, {
						name: '待打印',
						id: 2
					}, {
						name: '待收货',
						id: 3
					}, {
						name: '已完成',
						id: 4
					},
					{
						name: '退款/售后',
						id: 6
					},
				],
				// 页面
				pageNo: 1,
				// 订单类型
				type: 0,
				// 数据列表
				dataList: [],
				// 售后弹窗
				showAfterSales: false,
				// 申请退换货的订单信息
				returnGoods: {},
			};
		},
		onLoad(option) {
			this.type = Number(option.type) || 0
			this.getDataList()
		},
		methods: {
			/** 
			 * 获取数据
			 * @param {Boolean} init 是否初始化
			 */
			async getDataList(init = false) {
				try {
					if (init) {
						this.dataList = []
						this.pageNo = 1
					}
					if (this.type === 6) {
						// 售后单独处理
						const res = await OrderApi.OrderRetundList({
							status: -1, //售后申请
						})
						this.dataList = this.dataList.concat(res.result)
					} else {
						const res = await OrderApi.UserOrderList({
							type: this.type,
							p: this.pageNo
						})
						this.dataList = this.dataList.concat(res.result)
					}
				} catch (err) {
					this.$showToast(err || err.msg)
				}
			},
			// 跳转订单详情
			navToDetail(data) {
				if (this.type === 6) {
					this.$navTo('pages/mines/after_sales', {
						orderId: data.order_id,
					})
				} else {
					this.$navTo(`pages/mines/myOrderDetails`, {
						name: data.typename,
						orderId: data.order_id
					})
				}
			},
			// 更改订单状态
			changeType(e) {
				this.type = e.id
				this.getDataList(true)
			},

			// *********************** 操作按钮-开始

			// 确认收货
			confirmReceipt(orderId) {
				uni.showModal({
					title: '是否确定商品无损坏',
					success: (res) => {
						if (!res.confirm)
							return
						OrderApi.UserOrderAffirm({
								order_id: orderId
							})
							.then((res1) => {
								this.$showToast(res1.msg)
								this.getDataList(true)
							})
							.catch(err => this.$showToast(err))
					}
				})
			},
			// 去支付 
			async handlePayment(orderId) {
				try {
					const payInfoRes = await OrderApi.MiniPayOrder({
						order_id: orderId,
						openid: this.$store.getters['token']
					})
					const res = await toPromise(uni.requestPayment, {
						provider: 'wxpay',
						...payInfoRes.payinfo,
					})
					uni.hideLoading()
					this.$showToast('支付成功')
					this.getDataList(true)
				} catch (err) {
					console.log('handlePayment=', err);
					this.$showToast(err || '支付失败')
				}
			},
			// 取消订单
			cancelOrder(orderId) {
				uni.showModal({
					title: '是否确定取消该订单',
					success: (res) => {
						if (!res.confirm)
							return
						OrderApi.AllOrderOut({
								order_id: orderId
							})
							.then(res => {
								this.$showToast(res.msg || '已取消订单')
								this.getDataList(true)
							})
							.catch(err => {
								this.$showToast(err || '取消订单失败')
							})
					}
				})
			},
			// 立即评价
			handleEvaluate(data) {
				if (data.goods_list.length > 1) {
					this.$navTo('pages/mines/evaluation/list', {
						orderId: data.order_id
					})
				} else {
					this.$navTo('pages/mines/evaluation/submit', {
						orderId: data.order_id,
						goodsId: data.goods_list[0].goods_id
					})
				}
			},
			/** 
			 * 打开售后弹出框
			 * @param {Object} goods 商品信息
			 * @param {Boolean} show 是否展示
			 */
			handleShowAfterSales(goods, show = true) {
				this.returnGoods = goods
				this.showAfterSales = show
			},

			// *********************** 操作按钮-结束
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		box-sizing: border-box;
		padding-bottom: $safe-btm-env;

		.li {
			margin: 30rpx auto;
			width: 710rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 30rpx;
			opacity: 1;
			background: #ffffff;

			.top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #ff7300;
				margin-bottom: 20rpx;

				.name {
					flex: 1;
					color: #000;
					font-weight: 400;
				}
			}

			.content {
				width: 100%;
				color: #a5a5a5;
				font-size: 24rpx;

				>view {
					margin-bottom: 10rpx;
				}

				.t {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.r {
						color: #000;
						display: flex;
						align-items: center;
					}
				}
			}

			.sunmits {
				width: 100%;
				height: 50rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding-top: 30rpx;
				justify-content: flex-end;
				border-top: 1rpx solid #f3f3f3;

				view {
					width: 160rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 10rpx;
					text-align: center;
					// list-style: 50rpx;
					margin-left: 30rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #ff9844;
				}

				.btn1 {
					border: 1rpx solid #bcbcbc;
					color: #898989;
					background-color: #fff;
				}
			}
		}

		.nav-box {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			opacity: 1;
			background: #ffffff;
		}
	}


	// 底部弹出框部分
	.popup {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column-reverse;

		.popupFlex {
			height: 894rpx;
			border-radius: 20rpx 20rpx 0 0;
			background: #fff;
			padding: 0rpx 30rpx;

			.popupFlex-top-box {
				display: flex;
				align-items: center;

				.title {
					flex: 1;
					font-weight: bold;
					font-size: 30rpx;
					color: #1e1e1e;
					text-align: center;
					padding: 24rpx 0rpx;
				}

				.close-icon-box {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-left: 30rpx;
					width: 30rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.commodity {
				display: flex;
				align-items: center;

				image {
					width: 170rpx;
					height: 170rpx;
					border-radius: 6rpx;
					margin-right: 20rpx;
				}

				.text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 170rpx;

					.name {
						font-weight: 400;
						font-size: 26rpx;
						color: #1e1e1e;
					}

					.spec {
						font-weight: 400;
						font-size: 24rpx;
						color: #7e7e7e;
					}

					.spec2 {
						font-weight: 400;
						font-size: 24rpx;
						color: #1e1e1e;

						text {
							padding-left: 20rpx;
						}
					}
				}
			}

			.model {
				height: 100rpx;
				border-radius: 15rpx;
				background: #f5f5f5;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 20rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 56rpx;
						margin-right: 10rpx;
					}

					view {
						font-weight: 400;
						font-size: 40rpx;
						color: #1e1e1e;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 25rpx;
						height: 25rpx;
					}

					view {
						font-weight: 400;
						font-size: 24rpx;
						color: #7e7e7e;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>